<template>
	<view class="page-content">
		<view style="padding: 0 32rpx;height: 100%;overflow-y: auto">
			<view class="content-box">
				<view class="notice-box">
					<u-notice-bar mode="horizontal" :list="list" color="#000000" bg-color="rgba(255,214,0,0.25)" border-radius="4"
						:volume-icon="false" font-size="20"></u-notice-bar>
				</view>
				<view class="form-box">
					<view class="form-item">
						<view class="flex-row justify-between items-center section_2">
							<view class="flex-row">
								<image class="shrink-0 image_4" src="/static/index/location-light.png" />
								<text class="font_3 text_2 ml-9">起步价(10公里内)</text>
							</view>
							<view class="flex-row items-center">
								<u-input :custom-style="inputStyle" input-align="right" placeholder="请输入"
									v-model="formdata.startingPrice" />
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="flex-row justify-between items-center section_2">
							<view class="flex-row">
								<image class="shrink-0 image_4" src="/static/index/time.png" />
								<text class="font_3 text_2 ml-9">每公里价(10公里外)</text>
							</view>
							<view class="flex-row items-center">
								<u-input :custom-style="inputStyle" input-align="right" placeholder="请输入"
									v-model="formdata.kilometerPrice" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<form-item-title text="个人信息"></form-item-title>
			<view class="content-box">
				<view class="form-box">
					<u-form :label-style="labelStyle">
						<view class="flex-row justify-between items-center group_6">
							<text class="font_3 text_7">本人照片</text>
							<u-upload :action="action" :header="header" height="80" width="120" max-count="1"
								@on-success="successPhoto" @on-remove="removePhoto" ref="photoref"></u-upload>
						</view>
						<view class="flex-row justify-between items-center group_6">
							<text class="font_3 text_7">驾照</text>
							<u-upload :action="action" :header="header" height="80" width="120" max-count="1" @on-success="successJZ"
								@on-remove="removeJZ" ref="jzref"></u-upload>
						</view>
						<u-form-item label="姓名"><u-input input-align="right" v-model="formdata.name" /></u-form-item>
						<u-form-item label="年龄"><u-input type="number" input-align="right" v-model="formdata.age" /></u-form-item>
						<u-form-item label="性别"><u-input :disabled="true" input-align="right" @click="showSex = true"
								v-model="sexlabel" type="select" placeholder="请选择" /></u-form-item>
						<u-form-item label="驾龄(年)"><u-input type="number" input-align="right"
								v-model="formdata.drivingExperience" /></u-form-item>
						<u-form-item label="电话"><u-input type="number" input-align="right" v-model="formdata.phone" /></u-form-item>
						<u-form-item label="地址"><u-input input-align="right" v-model="formdata.address" disabled
								@click="getDestination" placeholder="请选择" /></u-form-item>
					</u-form>
				</view>
			</view>
			<form-item-title text="车辆信息"></form-item-title>
			<view class="content-box">
				<view class="form-box">
					<u-form :label-style="labelStyle">
						<view class="flex-row justify-between items-center group_6">
							<text class="font_3 text_7">车辆照片</text>
							<u-upload :action="action" :header="header" height="80" width="120" max-count="1" @on-success="successCL"
								@on-remove="removeCL" ref="clref"></u-upload>
						</view>
						<u-form-item label="车辆型号"><u-input input-align="right" v-model="formdata.carModel" /></u-form-item>
						<u-form-item label="接单时间"><u-input input-align="right" disabled="true" placeholder="请选择"
								v-model="formdata.orderAcceptanceTime" @click="showCalendar=true" /></u-form-item>
						<u-form-item label="是否有营运资格证"><u-switch slot="right" active-color="#FCD610"
								v-model="formdata.type"></u-switch></u-form-item>
						<view class="flex-row justify-between items-center group_6">
							<text class="font_3 text_7">上传营运资格证</text>
							<u-upload :action="action" :header="header" height="80" width="120" max-count="1"
								@on-success="successYyzz" @on-remove="removeYyzz" ref="yyzzref"></u-upload>
						</view>
					</u-form>
				</view>
			</view>
			<view class="content-box">
				<view class="form-box">
					<u-form-item label="备注" :label-style="labelStyle" label-position="top">
						<u-input type="textarea" v-model="formdata.remark" />
					</u-form-item>
				</view>
			</view>
			<view class="flex-col justify-center items-center">
				<view class="publish-btn" @click="handleSubmit">
					立即发布
				</view>
			</view>
		</view>
		<u-select v-model="showSex" mode="single-column" :list="sexlist" @confirm="handlesexconfirm"></u-select>
		<u-calendar v-model="showCalendar" mode="date" @change="changeCalendar" :min-date="todayData"
			:max-date="maxDate"></u-calendar>
		<u-picker mode="time" v-model="showDatePicker_start" :params="params" title="选择开始时间"
			@confirm="confirmDateStart"></u-picker>
		<u-picker mode="time" v-model="showDatePicker_end" :params="params" title="选择结束时间"
			@confirm="confirmDateEnd"></u-picker>
	</view>
</template>

<script>
	import formItemTitle from "components/index/form-item-title.vue";
	import petBasi from "../../../api/petBasi.js";
	import utils from "../../../utils/util.js";
	export default {
		data() {
			return {
				list: [
					'温馨提示：感谢您使用宠行宝•宠物巴士服务，平台提供信息共享服务，请您保护好自己的财产安全，期间的财物及人身安全责任需自行承担。'
				],
				action: this.$config.mobeilURL + "/common/uploadFile", // 演示地址
				labelStyle: {
					fontWeight: "bold",
					fontSize: "28rpx",
					whiteSpace: "nowrap"
				},
				inputStyle: {
					fontSize: "24rpx",
					minHeight: "44rpx",
					lineHeight: "44rpx",
					width: "200rpx"
				},
				checked: true,
				formdata: {
					address: "",
					age: "",
					carModel: "",
					carPhoto: "",
					certificatePhoto: "",
					driverLicense: "",
					driverPhoto: "",
					drivingExperience: "",
					kilometerPrice: "",
					lat: 0,
					lng: 0,
					name: "",
					orderAcceptanceTime: "",
					phone: "",
					publisherId: "",
					remark: "",
					sex: "",
					startingPrice: "",
					type: "",
				},
				showSex: false,
				sexlist: [{
						value: 0,
						label: '男'
					},
					{
						value: 1,
						label: '女'
					}
				],
				sexlabel: '',
				header: {
					"content-type": "multipart/form-data",
					"Authorization": uni.getStorageSync('cxbtoken')
				},
				maxDate: '9023-01-01',
				todayData: '',
				showDatePicker_start: false,
				showDatePicker_end: false,
				showCalendar: false,
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false,
				},
			}
		},
		onLoad() {
			this.todayData = new Date().toISOString().split('T')[0];
		},
		methods: {
			handlesexconfirm(val) {
				this.formdata.sex = val[0].value;
				this.sexlabel = val[0].label;
			},
			getDestination() {
				utils.chooseLocationInfo().then((res) => {
					this.formdata.lat = res.longitude;
					this.formdata.lng = res.latitude;
					this.formdata.address = res.name;
				});
			},
			successPhoto(data, index) {
				if (data.code !== 200) {
					this.$refs.photoref.lists[index].error = true;
				} else {
					this.formdata.driverPhoto = data.accessPath;
				}
			},
			removePhoto(index) {
				this.formdata.driverPhoto = '';
			},

			successJZ(data, index) {
				if (data.code !== 200) {
					this.$refs.jzref.lists[index].error = true;
				} else {
					this.formdata.driverLicense = data.accessPath;
				}
			},
			removeJZ(index) {
				this.formdata.driverLicense = '';
			},

			successCL(data, index) {
				if (data.code !== 200) {
					this.$refs.clref.lists[index].error = true;
				} else {
					this.formdata.carPhoto = data.accessPath;
				}
			},
			removeCL(index) {
				this.formdata.carPhoto = '';
			},

			successYyzz(data, index) {
				if (data.code !== 200) {
					this.$refs.yyzzref.lists[index].error = true;
				} else {
					this.formdata.certificatePhoto = data.accessPath;
				}
			},
			removeYyzz(index) {
				this.formdata.certificatePhoto = '';
			},
			handleSubmit() {
				this.formdata.lng = `${this.formdata.lng}`;
				this.formdata.lat = `${this.formdata.lat}`;
				uni.showLoading({
					title: '发布中'
				})
				petBasi
					.addVehicles(this.formdata)
					.then((res) => {
						uni.hideLoading();
						if (res.code === 0 || res.code === 200) {
							uni.showToast({
								title: '发布成功',
								icon: "none"
							})
						} else {
							uni.showToast({
								title: '发布失败',
								icon: "error"
							})
						}
						uni.navigateBack()
					})
					.catch((err) => {
						uni.hideLoading();
						uni.showToast({
							title: '发布失败',
							icon: "error"
						})
					});
			},
			changeCalendar(e) {
				this.date = `${e.month}-${e.day}`;
				this.showDatePicker_start = true;
			},
			confirmDateStart(e) {
				let str = `${this.date} ${e.hour}:${e.minute}`
				this.showDatePicker_end = true;
				this.showDatePicker_start = false;
				this.startTimeStr = str
			},
			confirmDateEnd(e) {
				let str = `${e.hour}:${e.minute}`
				this.formdata.orderAcceptanceTime = `${this.startTimeStr}-${str}`
			},
		},
		components: {
			formItemTitle
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		height: 100%;
		background-color: #F6F6F6;
		overflow-y: auto;

		.content-box {
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.notice-box {
				padding: 24rpx;
			}

			.form-box {
				padding: 0 32rpx 32rpx 32rpx;
				margin-bottom: 40rpx;

				.form-item {
					margin-top: 24rpx;

					.ml-9 {
						margin-left: 18rpx;
					}

					.section_2 {
						padding: 26rpx 36rpx 26rpx 44rpx;
						background-color: #ffd6000d;
						border-radius: 16rpx;

						.image_4 {
							width: 24rpx;
							height: 28rpx;
						}

						.font_3 {
							font-size: 28rpx;
							font-family: PingFang SC;
							line-height: 25.76rpx;
							font-weight: 700;
							color: #000000;
						}

						.text_2 {
							line-height: 26.12rpx;
						}

						// .text-wrapper_2 {
						// 	padding: 12rpx 0;
						// 	background-color: #fbd610;
						// 	border-radius: 8rpx;
						// 	overflow: hidden;
						// 	width: 100rpx;
						// 	height: 44rpx;

						// 	.font_2 {
						// 		font-size: 20rpx;
						// 		font-family: PingFang SC;
						// 		line-height: 18.4rpx;
						// 		color: #000000;
						// 	}
						// }

						.font_4 {
							font-size: 24rpx;
							font-family: PingFang SC;
							color: #666666;
						}
					}
				}

				.group_6 {
					padding: 32rpx 0;
					border-bottom: solid 2rpx #f3f3f3;

					.font_3 {
						font-size: 28rpx;
						font-family: PingFang SC;
						line-height: 25.76rpx;
						font-weight: 700;
						color: #000000;
					}

					.text_7 {
						line-height: 26.02rpx;
					}

					.image-wrapper {
						background-color: #ececec;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100rpx;
						height: 100rpx;
						font-size: 30px;
						color: #999999
					}
				}
			}
		}

		/deep/ .u-add-tips {
			display: none;
		}

		.publish-btn {
			width: 100%;
			padding: 40rpx 0;
			background-color: #fbd610;
			border-radius: 68rpx;
			font-size: 32rpx;
			text-align: center;
			font-weight: 700;
			margin-bottom: 24rpx;
		}
	}
</style>